<template>
  <div class="app-container">
    <el-divider>退款</el-divider>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="支付凭证" prop="number">
        <el-input
          style="width: 300px"
          v-model="form.number"
          ref="isFocus"
          placeholder="请输入支付凭证"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleClose">查询订单</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="订单信息"
      v-if="orderData != null"
      :visible.sync="dialogVisible1"
      width="70%"
    >
      <div class="card">
        <div class="item">
          <div class="label">订单号：</div>
          <div class="value">{{ orderData.payOrderId }}</div>
        </div>
        <div class="item">
          <div class="label">已退款金额：</div>
          <div class="value">
            {{ orderData.refundAmount ? orderData.refundAmount / 100 : "" }}
          </div>
        </div>
        <div class="item">
          <div class="label">订单金额：</div>
          <div class="value">{{ orderData.amount / 100 }}</div>
        </div>
        <div class="item">
          <div class="label">支付时间：</div>
          <div class="value">{{ orderData.successTime }}</div>
        </div>
        <div class="item">
          <div class="label">支付方式：</div>
          <div class="value">{{ paytype }}</div>
        </div>
        <div class="item">
          <div class="label">流水号：</div>
          <div class="value">{{ orderData.platformMchOrderNo }}</div>
        </div>
        <div class="item">
          <div class="label">实收金额：</div>
          <div class="value">{{ orderData.amount / 100 }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="handleClose1">退款</el-button>
      </span>
    </el-dialog>
    <el-dialog title="退款" :visible.sync="dialogVisible2" width="50%">
      <el-input
        v-model="money"
        ref="isFocus"
        placeholder="请输入退款金额"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="handleClose2"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, getCurrentInstance } from "vue";
import { queryOrder, payOrder } from "../../api/login";
const { ipcRenderer } = require("electron");

let dialogVisible = ref(true);
let dialogVisible1 = ref(false);
let dialogVisible2 = ref(false);
let money = ref("");
let loading = ref(false);
let paytype = ref("");
let form = ref({
  number: "",
});
const orderData = ref(null);
const isFocus = ref(null);
const formRef = ref();
const rules = ref({
  number: [{ required: true, trigger: "blur", message: "支付凭证不能为空" }],
});
const { proxy } = getCurrentInstance();

onMounted(() => {
  inputAutoFocus();
  ipcRenderer.on("update-msg", (event, age) => {
    console.log("update-msg", age);
    switch (age.state) {
      case 6:
        let str = JSON.parse(age.msg)
        form.value.number = str.code
        break;
      default:
        break;
    }
  });
});

function inputAutoFocus() {
  nextTick(() => {
    isFocus.value.focus();
  });
}

//查询订单
const handleClose = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      queryOrder(form.value.number).then((res) => {
        let { data } = res.data;
        if (data.res != 0) {
          proxy.$message.error(data.err);
          return;
        }
        if (data.data.way_code_type == "ALIPAY") {
          paytype.value = "支付宝";
        } else {
          paytype.value = "微信";
        }
        orderData.value = data.data;
        dialogVisible.value = false;
        dialogVisible1.value = true;
      });
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};

const handleClose1 = () => {
  if (orderData.value.refundAmount) {
    if (orderData.value.refundAmount == orderData.value.amount) {
      proxy.$message.error("亲~当前订单已完成退款，请勿重复操作！");
      return;
    }
    money.value = (
      orderData.value.amount / 100 -
      orderData.value.refundAmount / 100
    ).toFixed(2);
  } else {
    money.value = orderData.value.amount / 100;
  }
  dialogVisible1.value = false;
  dialogVisible2.value = true;
};
//订单退款
const handleClose2 = async () => {
  let obj = {
    type: "refund_data",
    data: {
      link_id: "1217752501201",
      network: 1,
      device_id: "EC16EAAE3C40",
      refund_code: form.value.number, //退款码
      auth_channel: 1,
      content: "",
      price: cheng(money.value, 100),
    },
    res: 0,
    err: "ok",
  };
  try {
    loading.value = true;
    const _data = await payOrder(JSON.parse(localStorage.getItem("diviceNo")), obj);
    let { data } = _data;
    if (data.data.res != 0) {
      proxy.$message.error(data.data.err);
      loading.value = false;
      return;
    } else {
      proxy.$message.success(data.data.err);
      let res = ipcRenderer.sendSync("refund", cheng(money.value, 100)); //同步营业额
      
    }
  } catch (e) {
    console.log(e);
    loading.value = false;
  }
  loading.value = false;
  setTimeout(() => {
    // number.value = "";
    // money.value = "";
    // dialogVisible1.value = false;
    // dialogVisible.value = true;
    // inputAutoFocus();
    location.reload();
  }, 2500);
};

const close = () => {
  form.value.number = "";
  money.value = "";
  dialogVisible1.value = false;
  dialogVisible.value = true;
  inputAutoFocus();
};

const cheng = (arg1, arg2) => {
  if (arg1 && arg2) {
    var m = 0,
      s1 = arg1.toString(),
      s2 = arg2.toString();
    try {
      m += s1.split(".")[1].length;
    } catch (e) {}
    try {
      m += s2.split(".")[1].length;
    } catch (e) {}
    let val =
      (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
      Math.pow(10, m);
    return String(val).replace("-", "");
  }
};
</script>

<style lang="scss" scoped>
.card {
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 16px;
    .label {
      width: 130px;
    }
  }
}
</style>